
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>


<div id="app">
    <el-upload
            class="avatar-uploader"
            action="/upload/native.do"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">

        <i  class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
   <table border="1px">
       <tr>
           <td v-for="ablum in imageList">
               <div>
                   <img src="/imageUrl" height="120px" width="120px">
               </div>
               <div>
                   <button @click="dele(ablum.uid)">删除照片</button>
               </div>
           </td>
       </tr>
   </table>
</div>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
        <script>
            new Vue({
                el: '#app',
                data(){
                    return {
                        imageList:[],
                        searchMap: {},
                        currentPage: 1,
                        total: 10,
                        size: 10,
                        id:0,
                        imageUrl: ''
                    }
                },
                created(){
                    this.searchMap={id:getQueryString("id")};
                    this.fetchData();
                },
                methods:{
                    fetchData (){
                        axios.post(`/album/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response => {
                            var temp=response.data.rows[0].imageItems;
                            this.id=response.data.rows[0].id;
                            var newResponseString =temp.replace(/\"uid\":(\d+)/,'"uid":"$1"');
                            var resultObj=JSON.parse(newResponseString);
                            this.imageList=JSON.parse(temp)
                            this.total = response.data.total;
                        });
                    },
                    dele (uid){
                        axios.get(`/album/deleteByIdAndUid.do?id=${this.id}&uid=${uid}`).then(response => {
                            this.fetchData (); //刷新列表
                        })
                    },
                    save (){
                        axios.get(`/album/savePic.do?id=${this.id}&imageUrl=${this.imageUrl}`).then(response => {
                            this.fetchData (); //刷新列表
                        });
                    },

                    handleAvatarSuccess(res, file) {
                        this.imageUrl = file.response;
                        this.save();
                    },
                    beforeAvatarUpload(file) {
                        const isJPG = file.type === 'image/jpeg';
                        const isLt2M = file.size / 1024 / 1024 < 2;

                        if (!isJPG) {
                            this.$message.error('上传头像图片只能是 JPG 格式!');
                        }
                        if (!isLt2M) {
                            this.$message.error('上传头像图片大小不能超过 2MB!');
                        }
                        return isJPG && isLt2M;
                    }
                }
            })
</script>
</body>
</html>